<ion-header id="cashHeader" [hidden]="showByLandscape">
  <ion-navbar>
    <ion-title>现金流明细</ion-title>
    <ion-buttons end>
      <button ion-button (click)="setShowByLandscape(1)" [hidden]="listData.length === 0">全屏显示</button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content id="cashDetailContent" class="funds">
  <ion-list class='gfoa-list'>
    <ion-item-divider class='list-no-more-tips' color="light" [hidden]="isLoadMore">暂无更多数据...</ion-item-divider>
  </ion-list>

  <div id="fundsDetailMsg" class="funds-detail-msg {{rotateClass}}">
    <!--<ion-grid>-->
    <ion-row responsive-sm id="dataRow">
      <ion-col id="cashDetailFundLeft" col-4 class="funds-left {{funds_left_scroll_x}}" (ionScroll)="scrollHandler($event)">
        <ion-list [hidden]="listData.length === 0" id="gridLeft"
                  approxItemHeight="60px">
          <ion-item-divider>
            <p id="fundNameP">&nbsp;流水生成日</p>
          </ion-item-divider>
          <div class="GridLeft" *ngFor="let field of listData">
            <ion-item class="funds-name-item">
              <p item-left class="funds-name">
                  <span class="funds-layout-flex GridFundName set-fund-name-color">
                    {{field.l_date}}
                  </span>
              </p>
            </ion-item>
          </div>
        </ion-list>
      </ion-col>

      <ion-col id="cashDetailFundRight" col-8 class="funds-right">
        <ion-list [hidden]="listData.length === 0"
                  [virtualScroll]="items"
                  approxItemHeight="60px" id="CashDetailGridRight">
          <ion-scroll scrollX="true" scrollY="true" class="item-wrap">
            <ion-item-divider id="CashDetailGridTitle" class="fund-right-header">
              <p item-left class="odd_header">
                业务日期
              </p>
              <p item-left class="odd_header">
                资金可用日
              </p>
              <p item-left class="odd_header">
                业务标志
              </p>
              <p item-left class="odd_header">
                证券代码
              </p>
              <p item-left class="odd_header" *ngIf="isRedemption">
                分级名称
              </p>
              <p item-left class="odd_header">
                市场
              </p>
              <p item-left class="odd_header">
                清算速度
              </p>
              <p item-left class="odd_header">
                发生金额
              </p>
              <p item-left class="odd_header">
                发生数量
              </p>
              <p item-left class="odd_header">
                备注
              </p>
            </ion-item-divider>
            <div *virtualItem="let temp" class="GridContent">
              <div *ngFor="let field of listData">
                <ion-item>
                  <p item-left item-text class="funds-layout-flex set-bg-color GridContent_p">
                    <span>{{field.l_trade_date}}</span>
                  </p>
                  <p item-left item-text class="funds-layout-flex set-bg-color GridContent_p">
                    <span>{{field.l_cash_enable_date}}</span>
                  </p>
                  <p item-left item-text class="funds-layout-flex set-bg-color GridContent_p">
                    <span>{{field.l_busin_flag_name}}</span>
                  </p>
                  <p item-left item-text class="funds-layout-flex set-bg-color GridContent_p">
                    <span>{{field.vc_stock_no}}</span>
                  </p>
                  <p item-left item-text class="funds-layout-flex set-bg-color GridContent_p"
                     *ngIf="isRedemption">
                    <span>{{field.l_subfund_name}}</span>
                  </p>
                  <p item-left item-text class="funds-layout-flex set-bg-color GridContent_p">
                    <span>{{field.vc_market_name}}</span>
                  </p>
                  <p item-left item-text class="funds-layout-flex set-bg-color GridContent_p">
                    <span>T+{{field.l_clear_speed}}</span>
                  </p>
                  <p item-left item-text class="funds-layout-flex set-bg-color GridContent_p">
                    <span>{{field.en_balance}}</span>
                  </p>
                  <p item-left item-text class="funds-layout-flex set-bg-color GridContent_p">
                    <span>{{field.l_quantity}}</span>
                  </p>
                  <p item-left item-text class="funds-layout-flex set-bg-color GridContent_p">
                    <span>{{field.vc_remark}}</span>
                  </p>
                </ion-item>
              </div>
            </div>
          </ion-scroll>
        </ion-list>
      </ion-col>

    </ion-row>
    <!--</ion-grid>-->
  </div>

</ion-content>
<div class="exitFullscreen" *ngIf="showByLandscape" (click)="setShowByLandscape(1)" [hidden]="disabledExistFullScreen">
  <!--<ion-icon name="contract"></ion-icon>-->
  <!--<img src="assets/img/common/exitFullScreen.png" />-->
  <span>取消全屏</span>
</div>
<div id="existPage" class="exitFullscreen" (click)="existPage()" [hidden]="!showByLandscape || !disabledExistFullScreen">
  <!--<ion-icon name="contract"></ion-icon>-->
  <!--<img src="assets/img/common/exitFullScreen.png" />-->
  <span>返回</span>
</div>
<div class="enterFullscreen" *ngIf="!showByLandscape" (click)="setShowByLandscape(1)" [hidden]="!showByLandscape || !disabledExistFullScreen || listData.length === 0">
  <span>全屏显示</span>
</div>
